<template>
    <div style="padding-right: 10%;padding-left: 10%;padding-bottom: 20px">
        <div style="padding-bottom: 20px">
            <el-row :gutter="5">
                <el-col :span="23">
                    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal"
                             @select="handleSelect">
                        <template v-for="(module,index) in modules">
                            <el-menu-item :index="module.id" :key="index" style="font-size: large;font-weight: normal">
                                {{module.name}}
                            </el-menu-item>
                        </template>
                    </el-menu>
                </el-col>
            </el-row>
        </div>
        <div>
            <el-row :gutter="15">
                <el-col :xs="24" :sm="12" :md="8" :lg="4" :xl="3" v-for="source in sources" :key="source.id"
                        style="padding-bottom: 15px" align="center">
                    <!--<el-tooltip placement="bottom-start" effect="light">-->
                        <div slot="content">{{source.sourcesName}}<br/>{{source.sourcesDesc}}</div>
                        <el-link target="_blank" :underline="false" :href="source.sourcesUrl">
                            <SourceCard :sourcesName="source.sourcesName"
                                        :sourcesDesc="source.sourcesDesc"></SourceCard>
                        </el-link>
                 <!--   </el-tooltip>-->
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
    import SourceCard from "./SourceCard";
    import {getPageDataServer} from '../../services'

    export default {
        name: "ShowSources",
        components: {SourceCard},
        data() {
            return {
                activeIndex: '',
                modules: [],
                sources: []
            }
        },

        created() {
            //获取集成化数据
            this.getPageData();
        },
        methods: {
            handleSelect(key, keyPath) {
                this.activeIndex = key;
                this.getPageData();
                // console.log(key, keyPath)
            },

            getPageData() {
                //清空所有已经渲染的数据
                this.modules = []
                this.sources = []
                //TODO 从存储区获取数据
                //获取数据
                getPageDataServer().then(res => {
                    const categories = res.data.categories;
                    console.log(categories)
                    if (categories.length < 1) {
                        this.$router.push({name: "ManagerLink"})
                    }
                    for (let i = 0; i < categories.length; i++) {
                        const categoryDto = categories[i];
                        const category = categoryDto.category;
                        this.modules.push(category);
                        const categoryId = category.id;
                        if (this.activeIndex) {
                            const sourceList = categoryDto.sources;
                            if (sourceList.length > 0) {
                                const id = sourceList[0].categoryId;
                                if (this.activeIndex === id) {
                                    this.sources = sourceList;
                                }
                            }
                        } else {
                            if (i == 0) {
                                this.activeIndex = categoryId;
                                this.sources = categoryDto.sources;
                            }
                        }
                    }
                })
            }
        }
    }
</script>

<style scoped>

    .show-source-card {
        font-size: larger;
        padding: 10px 0px 10px 0px;
    }
</style>